<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>瑞州支付</title>
	<link rel="stylesheet"  href="<?php echo base_url()?>/css/jquery.mobile-1.2.0.css" />
	<script src="<?php echo base_url()?>/js/jquery.js"></script>
	<script src="<?php echo base_url()?>/js/jquery.mobile-1.2.0.js"></script>
		<style type="text/css">
		.load_text{
		        border: none;
		        border-radius: 10px;
		        -moz-border-radius:10px;
		        -o-border-radius:10px;
		        -webkit-border-radius: 10px;
		        background-color: #E7F7CE;       
		        padding: 20px;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#form").submit(function(){
				if($("#card_no").val().replace(/(^\s*)|(\s*$)/g, "")==""){
					$("#card_popup").popup("open");
					return false;
				}
				if($("#card_password").val().replace(/(^\s*)|(\s*$)/g, "")==""){
					$("#password_popup").popup("open");
					return false;
				}
			});
		});

	</script>
	
		<script>
		//显示加载器
		function showLoader(str) {
		    //显示加载器.for jQuery Mobile 1.2.0
		    $.mobile.loading('show', {
		        text: str, //加载器中显示的文字
		        textVisible: true, //是否显示文字
		        theme: 'a',        //加载器主题样式a-e
		        textonly: false,   //是否只显示文字
		        html: ""           //要显示的html内容，如图片等
		    });
		}
		
		//隐藏加载器.for jQuery Mobile 1.2.0
		function hideLoader()
		{
		    //隐藏加载器
		    $.mobile.loading('hide');
		}
		</script>
	
	<script src="<?php echo base_url()?>/js/jquery.form.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#form').submit(function(){
				showLoader('正在支付,请稍后...');
			});
			$('#form').ajaxForm({
        		dataType:  'json',
        		beforeSubmit:  showRequest,
        		success:   processJson
    		});
			function showRequest(formData, jqForm, options) {
    		  	showLoader('正在支付,请稍后...');
    		}

    		function processJson(data) {
        		if (data.result==false) {
            		if(data.message !=""){
            			hideLoader();
            			$(".load_text").show();
	            		$(".load_text").html("<span style='color:red'>"+data.message+"</span>");
            		}
				}else{
					check_result();
				}
    		}
		});
		
		function check_result(){
			$.ajax({
				type: "post",
				url: "<?php echo base_url()?>index.php/pay/get_telephone_card_pay_result",
				data:{encrypt_tran_id:"<?php echo $encrypt_tran_id?>"},
				dataType:"json",
				beforeSend: function(XMLHttpRequest){
   				
				},
				success: function(data, textStatus){
			      	if (data.result==false) {
			      	  $(".load_text").html("<span style='color:red'>"+data.message+"</span>");
			    	  clearTimeout(t);
			    	  return false;
					}
					if (data.url!="") {
						window.location.href=data.url;
					}
					
				},
				complete: function(XMLHttpRequest, textStatus){
					
				},
				error: function(){
   				}
			});
			 t=setTimeout("check_result()",5000);
   		}
	</script>
</head> 
<body> 
<div data-role="page" data-theme="d">
	<div data-role="header" data-theme="a" data-position="fixed" >
		<div data-role="header">
		<h1>商品支付--电话卡支付</h1>
		</div>
	</div>
	<div data-role="content" style="margin-top:-15px;padding-bottom:150px;">
		<form action="<?php echo base_url()?>index.php/pay/telephone_card_pay_order" method="post" id="form">
			<ul data-role="listview" data-inset="true"  >
				<li data-role="fieldcontain" class="t_card_denomination">	
				    <label for="t_card_type">充值卡类型:</label>
				    <select id="t_card_type" name="t_card_type">
				    	<option value="SZX">神州行</option>
				   		<option value="UNICOM">联通卡</option>
				    	<option value="TELECOM">电信卡</option>
				    </select>
				</li>
				<li data-role="fieldcontain" class="t_card_denomination">	
				    <label for="t_card_denomination">充值卡面额:</label>
				    <select id="t_card_denomination" name="t_card_denomination">
				    	<option value="10">10元</option>
				   		<option value="20">20元</option>
				    	<option value="30">30元</option>
				    	<option value="50">50元</option>
				    	<option value="100">100元</option>
				    	<option value="200">200元</option>
				    </select>
				</li>
				<li data-role="fieldcontain" class="card_info" >
			        <label for="card_no" >充值卡号:</label>
			        <input type="text" name="card_no" id="card_no" required  value="" placeholder="充值卡号" data-theme="d" />
				</li> 
				<li data-role="fieldcontain" class="card_info" >
					 <label for="card_password" >充值卡密码:</label>
			        <input type="text" name="card_password" id="card_password" required  value="" placeholder="充值卡密码" data-theme="d" />
				</li> 
				<li >
					<input type="submit" value="确认支付"    data-icon="check" data-theme="f" >
					<input type="hidden"  name="encrypt_tran_id" value="<?php echo $encrypt_tran_id ?>" />
					<input type="hidden"  name="pay_type" value="1" />
				</li>
			</ul>
		</form>
		<p class="load_text" style="display: none;">正在充值...</p>
	</div>
	<div data-role="popup" id="card_popup" class="ui-content" data-theme="e" style="max-width:350px;">
          <p>请输入您的充值卡号</p>
	</div>
	<div data-role="popup" id="password_popup" class="ui-content" data-theme="e" style="max-width:350px;">
          <p>请输入您的充值卡密码</p>
	</div>
</div>

</body>
</html>